<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>
	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1 text-center panel" id="view">
		<!-- 展示操作路径 -->
		<div class="panel-heading text-left bg-danger" style="height: 50px">
			<div class="col-xs-6">
				<a href="index.jsp">商城首页</a>-><a href="index.jsp?gtid=${goods.gtid}">${goods.gtname}</a>-><a
					href="javascript:void(0)">${goods.gname}</a>
			</div>
			<div class="col-xs-6 text-right">
				<button class="btn btn-xm btn-primary" onclick="goBack()">继续购物</button>
			</div>
		</div>
		<!-- 面板主体 -->
		<div class="panel-body bg-warning">
			<!-- 商品图片 -->
			<div class="col-md-4" style="height: 240px">
				<img src="${goods.gpic}" height="240px">
			</div>
			<div class="col-md-8" style="height: 200px">
				<!-- 商品信息 -->
				<div>
					<table class="table">
						<tr>
							<td class="text-right" style="vertical-align: middle; width: 20%">商品名：</td>
							<td class="text-left" style="vertical-align: middle; width: 80%"
								colspan="2"><font size="5">${goods.gname}</font></td>
						</tr>
						<tr>
							<td class="text-right" style="vertical-align: middle; width: 20%">价格：</td>
							<td class="text-left" style="vertical-align: middle; width: 80%"
								colspan="2"><font color="red">￥<font size="5">${goods.gprice}</font></font></td>
						</tr>
						<tr>
							<td class="text-right" style="vertical-align: middle; width: 20%">数量：</td>
							<td class="text-left" style="vertical-align: middle; width: 30%">
								<div class="input-group col-md-10">
									<span class="input-group-btn" onclick="subOinum()">
										<button class="btn btn-default" type="button">-</button>
									</span> <input type="text" class="form-control" value="1" id="oinum">
									<span class="input-group-btn" onclick="addOinum()">
										<button class="btn btn-default" type="button">+</button>
									</span>
								</div>
							</td>
							<td class="text-left" style="vertical-align: middle;">库存：<span
								id="gstock">${goods.gstock}件</span></td>
						</tr>
						<tr>
							<td colspan="3"><input type="hidden" value="${goods.gid}"
								id="gid" /></td>
						</tr>
					</table>
				</div>
				<!-- 操作 -->
				<div class="col-md-6">
					<button class="btn btn-block btn-info" id="addCart">加入购物车</button>
				</div>
				<div class="col-md-6">
					<button class="btn btn-block btn-success" id="buyGoods">立即购买</button>
				</div>
			</div>
		</div>

		<!-- 商品介绍 -->
		<div class="panel-footer text-left">
			<h3>商品介绍：</h3>
			<font size="3">${goods.gdesc}</font>
		</div>
		<div class='col-md-12 bg-warning' style="height: 50px;"></div>
	</div>

	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
	//继续购物
	function goBack() {
		history.go(-1);
	}

	$(document).ready(function() {
		$("#addCart").click(function() {
			let gid = $("#gid").val();
			let oinum = $("#oinum").val();
			addCart(gid, oinum)
		})
		$("#addCart").click(function() {
			let gid = $("#gid").val();
			let oinum = $("#oinum").val();
			buy(gid, oinum)
		})
		$("#oinum").change(function() {
			//正则表达式：1~999
			let zz = /^[1-9]\d{0,2}$/;
			let oinum = parseInt($("#oinum").val());
			let gstock = parseInt($("#gstock").text());
			if (zz.test(oinum)) {
				if (oinum < 1) {
					$("#oinum").val(1);
				} else if (oinum > 999 || oinum > gstock) {
					$("#oinum").val(gstock < 999 ? gstock : 999);
				}
			} else {
				alert("商品数量必须是1~999之间的整数，且不能超过商品库存！");
				$("#oinum").val(1);
			}
		})
	})

	function addOinum() {
		let oinum = parseInt($("#oinum").val());
		let gstock = parseInt($("#gstock").text());
		if (oinum == 999 || oinum == gstock) {
			$("#oinum").val(oinum);
		} else {
			$("#oinum").val(oinum + 1);
		}
	}

	function subOinum() {
		let oinum = parseInt($("#oinum").val());
		if (oinum == 1) {
			$("#oinum").val(1);
		} else {
			$("#oinum").val(oinum - 1);
		}
	}
</script>
</html>